<template>
	<view>
		<view class="flex text-center border-bottom text-gray">
			<view 
				class="cu-item flex-sub margin-tb-sm" 
				:class="index == currentCategoryId?'text-white cur':''" 
				v-for="(category,index) in categorys" 
				:key="index" 
				@tap="categoryTap" 
				:data-categoryId="category.categoryId"
				:data-id="index">
				{{category.name}}
			</view>
			
		</view>
		<u-parse :content="contant">
		</u-parse>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
		    uParse
		  },
		props: {
			index: {
				type: Number,
				default: 0
			}
		},
		data: function() {
			return {
				currentCategoryId: 0,
				categorys: [],
				contant: "",
			}
		},
		created:function(){
			this.currentCategoryId = this.index;
			this.http.get({
				url: "/category/sub",
				param: {
					categoryId: 0
				}
			}).then(res => {
				this.categorys = res;
			}).then(() => {
				this.http.get({
					url: "/category/info",
					param: {
						categoryId: this.categorys[0].categoryId
					}
				}).then(res => {
					console.log(res);
					this.contant = res.categoryDetails[0].contant;
				});
			});
		},
		methods: {
			categoryTap: function(event) {
				this.currentCategoryId = event.currentTarget.dataset.id;
				
				let currentId = event.currentTarget.dataset.categoryid;
				console.log(currentId);
				
				this.http.get({
					url: "/category/info",
					param: {
						categoryId: currentId
					}
				}).then(res => {
					console.log(res);
					this.contant = res.categoryDetails[0].contant;
				});
			}
		}
	}
</script>

<style>
	
</style>
